<template>
    <render />
</template>

<script lang='ts' setup>
import { h, resolveComponent, defineProps, withDefaults } from 'vue'

const props = withDefaults(
    defineProps<{
        name?: string,
        color?: string,
        size?: number | string
    }>(), {
    name: '',
    color: '',
    size: 18
}
)
// 如果以名称注册组件时，可以使用resolveDirective函数加载动态组件
// 参数3也可以是h函数，并且以函数返回
// 是ele开头则按规则渲染，否则渲染为i标签
const render = () => {
    if (props.name?.startsWith('ele-')) {
        return h(resolveComponent('el-icon'),
            { size: props.size, color: props.color }
            , () => h(resolveComponent(props.name)))

    }else{
        return h('i')
    }

}
</script>
<style lang="scss" scoped></style>